<template>
  <div class="pos_relative">
    <div class="marke_col_card flex_left_right">
      <div class="marke_col_icon">
        <img :src="getImageUrl(icon)" />
      </div>
      <div>
        <div class="marke_col_title font_20 line_height_26 m_b_10">{{ title }}</div>
        <template v-if="dataList">
          <div class="marke_col_test font_14 line_height_24" v-for="(item, index) in dataList" :key="index"><span class="dot"></span> {{ item }}</div>
        </template>
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">
  import { defineProps, PropType } from 'vue'
  import { getImageUrl } from '@/utils'
  defineProps({
    title: {
      type: String as PropType<string>,
      require: true,
      default: () => '',
    },
    icon: {
      type: String as PropType<string>,
      require: true,
      default: () => '',
    },
    dataList: {
      type: Array as PropType<string[]>,
      require: true,
      default: () => [],
    },
  })
</script>
<style scoped lang="less">
  .marke_col_card {
    background: #ffffff;
    box-shadow: 0px 15px 31px 0px rgba(0, 59, 175, 0.12);
    border-radius: 5px;

    .marke_col_title {
      font-weight: 600;
    }
    .marke_col_test {
      color: #333333;
      .dot {
        width: 4px;
        height: 4px;
        border-radius: 50%;
        overflow: hidden;
        display: inline-block;
        background: #d8d8d8;
        margin-right: 10px;
        vertical-align: middle;
      }
    }
  }
</style>
